<template>
	<view class="association">
		<view class="associationS">
			<u-search placeholder="请输入" v-model="name" @search="searchTitle" @custom="customTitle"></u-search>
		</view>
		<view class="associationDiv">
			<u-checkbox-group v-model="checkboxValue1" placement="column" iconPlacement="right">
				<u-checkbox v-for="(item, index) in columns" :key="index" :label="item.title"
					:name="item.id"></u-checkbox>
			</u-checkbox-group>
		</view>
		<view class="load-more" v-if="showLoading">
			<text>滑动到底部加载更多</text>
		</view>
		<view class="load-more" v-if="showNoMore">
			<text>没有更多数据了</text>
		</view>
		<view class="associationB">
			<u-button type="primary" text="保存" @click="OK"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		scenicAreaAndHotelAndFood
	} from '@/api/userCenter.js'
	export default {
		data() {
			return {
				name: '',
				pageNum: 1, // 当前页码
				pageSize: 30, // 每页条数
				total: 0, // 总数据量
				isLoading: false, // 是否正在加载
				showLoading: false, // 显示加载中
				showNoMore: false, // 显示没有更多
				columns: [],
				checkboxValue1: []
			};
		},
		onLoad() {
			this.getdetailsIdList()
		},
		// 页面滚动到底部
		onReachBottom() {
			// 页面滚动到底部时触发
			if (this.columns.length < this.total) {
				this.pageSize += 10;
				this.getdetailsIdList();
			} else if (this.columns.length >= this.total) {
				this.showNoMore = true;
				this.showLoading = false;
			}
		},
		methods: {
			// 保存
			OK() {
				let arr = []
				this.columns.forEach(res => {
					this.checkboxValue1.forEach(str => {
						if (str == res.id) {
							arr.push(res.title)
						}
					})
				})
				this.$api.prePage().detailsId = arr.join(",");
				this.$api.prePage().strategy.detailsId = this.checkboxValue1
				uni.navigateBack()
			},
			// 点击手机键盘搜索按钮
			searchTitle() {
				this.getdetailsIdList()
			},
			// 点击右侧的搜索按钮
			customTitle() {
				this.getdetailsIdList()
			},
			// 获取关联列表
			async getdetailsIdList() {
				// 显示加载状态
				this.isLoading = true;
				this.showLoading = true;
				this.showNoMore = false;
				let par = {
					name: this.name,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
				let res = await scenicAreaAndHotelAndFood(par)
				if (res.code == 200) {
					const newData = res.data.records;
					this.total = res.data.total;
					// 合并数据
					if (this.pageNum == 1) {
						this.columns = newData;
					} else {
						this.columns = this.columns.concat(newData);
					}

					// 控制显示状态
					if (this.columns.length >= this.total) {
						this.showNoMore = true;
						this.showLoading = false;
					} else {
						this.showNoMore = false;
						this.showLoading = true;
					}
				} else {
					// 无论成功失败，都结束加载状态
					this.isLoading = false;
					this.showLoading = false;
				}
			},
		}
	}
</script>

<style lang="scss">
	.association {
		padding: 30rpx;
		padding-bottom: 240rpx;
		position: relative;
		height: 100vh;

		.associationS {
			width: 100%;
			padding: 0 30rpx;
			position: fixed;
			top: 0;
			left: 0;
			background-color: #ffffff;
		}

		.associationB {
			width: 100%;
			padding: 20rpx 30rpx;
			background-color: #ffffff;
			position: fixed;
			bottom: 0;
			left: 0;
		}

		.associationDiv {
			margin-top: 60rpx;

			::v-deep .u-checkbox {
				margin-bottom: 20rpx;
			}
		}

		.load-more {
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #666;
		}

		/* 加载动画 */
		.loading-spinner {
			width: 30rpx;
			height: 30rpx;
			border: 3rpx solid #ccc;
			border-top-color: #333;
			border-radius: 50%;
			animation: spin 1s linear infinite;
			margin-right: 16rpx;
		}

		@keyframes spin {
			to {
				transform: rotate(360deg);
			}
		}
	}
</style>